<template>
  <div class="user_info">
    <form class="form-inline mb-3">
      <div class="form-group">
        <input type="text" class="form-control" name="searchCon" v-model='searchName' placeholder="请输入用户名">
        <input type="text" class="form-control" name="searchId" v-model='searchId' placeholder="请输入工号">
      </div>
      <el-button class="btn btn-primary ml-1" @click="search()">查询</el-button>
      <el-button class="btn btn-primary ml-1" type="reset">重置</el-button>
      <el-button class="btn btn-primary ml-1" type="reset">分配角色</el-button>
      <el-button class="btn btn-primary ml-1" type="reset" @click="receive()">+新增用户</el-button>
      <el-dialog title="新增用户" :visible.sync="getbox">
          <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户工号" :label-width="formLabelWidth" prop="userId">
              <el-input v-model.number="form.userId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
              <el-input v-model="form.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" :label-width="formLabelWidth">
              <el-radio-group v-model="form.sex">
                <el-radio label="男" value="男"></el-radio>
                <el-radio label="女" value="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="用户部门" :label-width="formLabelWidth" prop="department">
              <el-cascader
                v-model="form.departmentInfo"
                :options="options"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="直属上级" :label-width="formLabelWidth">
              <el-select v-model="form.roleselect" placeholder="请选择...">
                <el-option v-for='roleselect in roleInfo' :label='roleselect.userName'
                           :value="roleselect.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth" prop="phone">
              <el-input v-model.number="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          <el-form-item label="电子邮件" :label-width="formLabelWidth" prop="email">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="出生年月" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="入职时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.dutydate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="公司" :label-width="formLabelWidth">
            <el-select v-model="form.companyselect" placeholder="请选择...">
              <el-option v-for='companyselect in companyInfo' :label='companyselect.cName'
                         :value="companyselect.cid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="级别" :label-width="formLabelWidth">
            <el-select v-model="form.levelselect" placeholder="请选择...">
              <el-option v-for='levelselect in levelInfo' :label='levelselect.gName'
                         :value="levelselect.gid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位" :label-width="formLabelWidth">
            <el-select v-model="form.jobselect" placeholder="请选择...">
              <el-option v-for='jobselect in jobInfo' :label='jobselect.pName'
                         :value="jobselect.pid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="薪水" :label-width="formLabelWidth" prop="salary">
            <el-input v-model="form.salary" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="getbox = false">取 消</el-button>
          <el-button type="primary" @click="addUser()">确 定</el-button>
        </div>
      </el-dialog>
      <el-button class="btn btn-primary ml-1" type="reset" @click="">-删除用户</el-button>
      <!--<el-dialog title="" :visible.sync="deleteid">-->
        <!--<el-form :model="form">-->
          <!--<el-form-item label="请输入需要删除的员工工号" >-->
            <!--<el-input v-model="id" autocomplete="off"></el-input>-->
          <!--</el-form-item>-->
        <!--</el-form>-->
        <!--<div slot="footer" class="dialog-footer">-->
          <!--<el-button @click="deleteid = false">取 消</el-button>-->
          <!--<el-button type="primary" @click="deleteUser(form.id)">确 定</el-button>-->
        <!--</div>-->
      <!--</el-dialog>-->
    </form>
    <h4>用户管理</h4>
    <table class="table">
      <tr>
        <td><input type="checkbox"></td>
        <td>工号</td>
        <td>用户名</td>
        <td>手机</td>
        <td>电子邮件</td>
        <td>性别</td>
        <td>出生年月</td>
        <td>入职时间</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr v-for='item in users'>
        <td><input type="checkbox"></td>
        <td>{{item.id}}</td>
        <td>{{item.userName}}</td>
        <td>{{item.userNum}}</td>
        <td>{{item.userPhone}}</td>
        <td>{{item.userEmail}}</td>
        <td>{{item.userGender}}</td>
        <td>{{item.userBirthday}}</td>
        <td>{{item.userDutyTime}}</td>
        <td>{{item.userStatus}}</td>
        <!--<td>{{item.employeeId}}</td>-->
        <!--<td>{{item.employeeName}}</td>-->
        <!--<td>{{item.phoneNumber}}</td>-->
        <!--<td>{{item.email}}</td>-->
        <!--<td>{{item.sex}}</td>-->
        <!--<td>{{item.birthDay}}</td>-->
        <!--<td>{{item.ruzhiDay}}</td>-->
        <!--<td>{{item.staus}}</td>-->
        <td>
          <a href="" class="mr-2" @click.prevent="getUserAll(item.id)">修改</a>
          <el-dialog title="修改用户" :visible.sync="getall">
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户工号" :label-width="formLabelWidth" prop="userId">
                <el-input v-model.number="form.userId" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
                <el-input v-model="form.userName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户性别" :label-width="formLabelWidth">
                <el-radio-group v-model="form.sex">
                  <el-radio label="男" value="男"></el-radio>
                  <el-radio label="女" value="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="用户部门" :label-width="formLabelWidth" prop="department">
                <el-cascader
                  v-model="form.departmentInfo"
                  :options="options"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="直属上级" :label-width="formLabelWidth">
                <el-select v-model="form.roleselect" placeholder="请选择..." filterable remote>
                  <el-option v-for='roleselect in roleInfo' :label='roleselect.userName'
                             :value="roleselect.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系电话" :label-width="formLabelWidth" prop="phone">
                <el-input v-model.number="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电子邮件" :label-width="formLabelWidth" prop="email">
                <el-input v-model="form.email" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="出生年月" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="form.birthday"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="入职时间" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="form.dutydate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="公司" :label-width="formLabelWidth">
                <el-select v-model="form.companyselect" placeholder="请选择...">
                  <el-option v-for='companyselect in companyInfo' :label='companyselect.cName'
                             :value="companyselect.cid"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="级别" :label-width="formLabelWidth">
                <el-select v-model="form.levelselect" placeholder="请选择...">
                  <el-option v-for='levelselect in levelInfo' :label='levelselect.gName'
                             :value="levelselect.gid"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="岗位" :label-width="formLabelWidth">
                <el-select v-model="form.jobselect" placeholder="请选择...">
                  <el-option v-for='jobselect in jobInfo' :label='jobselect.pName'
                             :value="jobselect.pid"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="薪水" :label-width="formLabelWidth" prop="salary">
                <el-input v-model="form.salary" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="getall = false">取 消</el-button>
              <el-button type="primary" @click="modifyUser()">确 定</el-button>
            </div>
          </el-dialog>
          <a href="" class="mr-2" @click.prevent="deleteUser(item.id)">注销</a>
          <a href="">密码重置</a>
        </td>
      </tr>
    </table>
    <select @change='getPageSize($event)'>
      <option v-for='item in optList' :value="item.value">每页显示{{item.value}}条数据</option>
    </select>
    <button class="btn btn-primary ml-3 mr-3" @click='change(-1)'>上一页</button>
    <input type="text" class="form-inline" name="currentPage" v-model='currentPage' @change='jumpTo()' placeholder="页码">
    <button class="btn btn-primary ml-3" @click='change(+1)'>下一页</button>
    <td>一共有{{totalCount}}条记录</td>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        getbox: false,
        getall: false,
        deleteid:false,
        users: {},
        departmentInfo: [],
        companyInfo: {},
        levelInfo: {},
        jobInfo: {},
        roleInfo: {},
        options: [],
        currentPage: '1',
        pageSize: '5',
        totalCount: '',
        searchName: '',
        searchId: '',
        totalCount: '',
        n: '',
        optList: [
          {value: 5},
          {value: 10},
          {value: 15},
          {value: 20},
        ],
        form: {
          id:{},
          departmentInfo: [],
          userId: '',
          userName: '',
          sex: '',
          department: '',
          leader: '',
          phone: '',
          email: '',
          birthday: '',
          dutydate: '',
          company: '',
          class: '',
          job: '',
          salary: '',
        },

        rules: {
          userId: [
            {required: true, message: '请输入用户工号',},
            {type: 'number', message: '请输入数字', trigger: 'blur'},
          ],
          userName: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'},
          ],
          phone: [
            {type: 'number', message: '请输入正确的手机号'},
          ],
          email: [
            {type: 'email', message: '请输入正确的邮箱'},
          ],
          // salary: [
          //   {type: 'number', message: '请输入正确的薪水'},
          // ],
        },


        formLabelWidth: '120px',
      }
    },
    methods: {
      getData() {
        this.getbox = false;
        this.getall = false;
        var url = '/emp/find'
        // var url = '/emp/list'
        // var data={params:{currentPage:this.currentPage,pageSize: this.pageSize}}
        var data = {params: {currentPage: this.currentPage, pageSize: this.pageSize}}
        this.axios.get(url, data).then(res => {
          this.users = res.data.data.pageInfo;
          this.totalCount = res.data.data.totalCount;
        })
      },
      change(n) {
        this.currentPage = parseInt(this.currentPage)
        if (n == -1) {
          if (this.currentPage == 1) {
            alert('当前为第一页，无法上一页');
          } else {
            this.currentPage = this.currentPage - 1;
            var data = {currentPage: this.currentPage, pageSize: this.pageSize}
            this.getData()
          }
        } else {
          if (n == 1) {
            this.currentPage = this.currentPage + 1;
            var data = {currentPage: this.currentPage, pageSize: this.pageSize}
            this.getData()
          }
        }
      },
      search() {
        // var url = '/user/findByName'
        var url = '/emp/find'
        var data = {userName: this.searchName, userNum: this.searchId}
        // var data = {id:this.searchId}
        this.axios.post(url, this.qs.stringify(data)).then(res => {
          this.users = res.data.data.pageInfo;
        })
        // this.getData();
      },
      receive() {
        this.getbox = true;
        var url = '/emp/showInfo';
        this.axios.post(url).then(res => {
          this.companyInfo = res.data.data.company;
          this.levelInfo = res.data.data.grade;
          this.jobInfo = res.data.data.position;
          this.roleInfo = res.data.data.userParentList;
        });
          this.axios.get(url).then(res=>{
              this.options=res.data.data.deps;
            //更改键值
          this.options = this.options.map(function (a) {
            return {
              'value': a.did,
              'label': a.dName,
              'children': a.dSonInfo
            }
          })
          for (var key of this.options) {
            key.children = key.children.map(function (b) {
              return {
                'value': b.did,
                'label': b.dName
              }
            })
          }
        });
          },

      getUserAll(value) {
        this.getall=true;
        this.receive();
        this.getbox=false;
        var url = '/emp/update';
        var data = {id: value};
        this.form.id = value;
        this.axios.post(url,this.qs.stringify(data)).then(res => {
          console.log(res);
            this.form.companyselect = res.data.data.userBean.userCompany.cName;
            this.form.levelselect = res.data.data.userBean.userGrade.gName;
            this.form.jobselect = res.data.data.userBean.userPosition.pName;
            this.form.roleselect = res.data.data.userBean.userParentId.userName;
            this.form.departmentInfo.push(this.options[0].value,
              res.data.data.userBean.userDepartment.did);
            this.form.userId = res.data.data.userBean.userNum;
            this.form.userName = res.data.data.userBean.userName;
            this.form.sex = res.data.data.userBean.userGender;
            this.form.phone = res.data.data.userBean.userPhone;
            this.form.email = res.data.data.userBean.userEmail;
            this.form.birthday = res.data.data.userBean.userBirthday;
            this.form.dutydate = res.data.data.userBean.userDutyDate;
            this.form.salary = res.data.data.userBean.userSalary;
            })
      },

      addUser(){
        var url = 'emp/add';
        var data = {userNum:this.form.userId,
          userName:this.form.userName,
          userGender:this.form.sex,
          departmentId:this.form.departmentInfo[1],
          parentId:this.form.roleselect,
          userPhone:this.form.phone,
          userEmail:this.form.email,
          userBirthday:this.form.birthday,
          userDutyDate:this.form.dutydate,
          companyId:this.form.companyselect,
          gradeId:this.form.levelselect,
          positionId:this.form.jobselect,
          userSalary:this.form.salary,
        }
        console.log(data);
        this.axios.post(url,this.qs.stringify(data)).then(res => {
        })
        this.getData();
      },

      deleteUser(value)
        {
          // deleteid = false；
          var url = '/emp/del';
          var obj=[];
          obj[0]=value;
          var data = {ids: obj}
          this.axios.post(url,this.qs.stringify(data,{indices:false})).then(res => {
          })
          this.getData();
        },
      modifyUser(){
        var url = 'emp/save';
        var data = {
          id:this.form.id,
          userNum:this.form.userId,
          userName:this.form.userName,
          userGender:this.form.sex,
          departmentId:this.form.departmentInfo[1],
          parentId:this.form.roleselect.id,
          userPhone:this.form.phone,
          userEmail:this.form.email,
          userBirthday:this.form.birthday,
          userDutyDate:this.form.dutydate,
          companyId:this.form.companyselect.cid,
          gradeId:this.form.levelselect.gid,
          positionId:this.form.jobselect.id,
          userSalary:this.form.salary,
        }
        this.axios.post(url,this.qs.stringify(data)).then(res => {
        })
        this.getData();
      },
      },
      mounted() {
        this.getData()
      }

    }
</script>


